<template>
	<div class="page-root" @scroll="didScroll">
		<IndexHeader 
			:poi="position"
			:wea="weather"
			:hot="hot"
		></IndexHeader>
		
		<IndexSwiper :swi="swi"></IndexSwiper>
		
		<h3>推荐商家</h3>
		
		<IndexList 
			:list="resList"
			:starSize="starSize"
		></IndexList>
		
		
	</div>
</template>

<script>
	import IndexHeader from "../components/IndexHeader.vue";
	import IndexSwiper from "../components/IndexSwiper.vue";
	import IndexList from "../components/IndexList.vue";
	
	import bus from "../util/bus.js";
	
	export default{
		components:{
			IndexHeader,
			IndexSwiper,
			IndexList
		},
		data:function(){
			return {
				lat:34.741032,
				lon:113.691322,
				position:{},
				weather:{},
				hot:{},
				swi:{},
				resList:[],
				starSize:12,
				dataState:"normal",
				offset:0//页面偏移量
			}
		},
		mounted:function(){
			bus.lat = this.lat;
			bus.lon = this.lon;
			this.requestPosition();
			this.requestWeather();
			this.requestHot();
			this.requestSwiper();
			this.requestShop();
			
			var w = document.documentElement.clientWidth;
			this.starSize = w/32*1.6;
			window.addEventListener("resize",function(){
				var w = document.documentElement.clientWidth;
				this.starSize = w/32*1.6;
			}.bind(this));
			
		},
		activated:function(){
			this.$el.scrollTop = this.offset;
		},
		methods:{
			didScroll:function(e){
				var sh = e.target.clientHeight;
				var ch = e.target.scrollHeight;
				var os = e.target.scrollTop;
				if(os+sh+100>=ch){
//					console.log("到底了");
					this.requestShop();
				}
				this.offset = os;
			},
			
			//位置请求
			requestPosition:function(){
				this.$http.get("/ele/bgs/poi/reverse_geo_coding",{
					params:{
						latitude:this.lat,
						longitude:this.lon
					}
					
				}).then(res=>{
					this.position = res.data
				});
			},
			//天气请求
			requestWeather:function(){
				this.$http.get("/ele/bgs/weather/current",{
					params:{
						latitude:this.lat,
						longitude:this.lon
					}
				}).then(res=>{
					this.weather = res.data
				});
			},
			//热搜词
			requestHot:function(){
				this.$http.get("/ele/shopping/v3/hot_search_words",{
					params:{
						latitude:this.lat,
						longitude:this.lon
					}
				}).then(res=>{
					this.hot = res.data
				});
			},
			//轮播图数据请求
			requestSwiper:function(){
				this.$http.get("/ele/shopping/v2/entries",{
					params:{
						latitude:this.lat,
						longitude:this.lon,
						templates:["main_template"]
					}
				}).then(res=>{
					this.swi = res.data[0].entries;
				});
			},
			//请求商家列表
			requestShop:function(){
				
				// if(this.dataState=="loading"){
				// 	return;
				// }
				// this.dataState = "loading";
				
				this.$http.get("/ele/shopping/restaurants",{
					params:{
						latitude:this.lat,
						longitude:this.lon,
						offset:this.resList.length,
						limit:20,
						extras:["activities"],
						terminal:"h5"
					}
				}).then(res=>{
//					console.dir(res.data);
//					this.resList = res.data;
					this.resList = this.resList.concat(res.data);
					// this.dataState = "done";
				});
			},
		}
	}
</script>

<style scoped>
	.page-root{
		height: calc(100vh - 50px);
		overflow: scroll;
	}
	
	h3{
		padding: 5px 10px;
		border-bottom: solid 1px #999999;
		border-top: solid 10px #eeeeee;
		font-weight: bold;
	}
	
</style>